<!-- <template>
    <div class="top-page">
        <img :src="playlist" class="bgimg" />
        <div class="top-detail">
            <div class="nav">
                <div class="left">
                    <SvgIcon class="icon" iconName="zuojiantou" @click="$router.go(-1)" />
                    <span>歌单</span>
                </div>
                <div class="right">
                    <SvgIcon class="icon, search" iconName="sousuo1-copy" />
                    <SvgIcon class="icon" iconName="hanbaocaidan1" />
                </div>
            </div>
            <div class="content">
                <img />
                <div class="detail">
                    <span class="title"></span>
                    <span class="author"></span>
                    <div class="des"></div>
                </div>
            </div>
            <div class="icons-list">
                <div class="icon-item" v-for="item in iconsList" :key="item.id">
                    <SvgIcon class="icon" :iconName="item.icon" />
                    <span>{{ item.des }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const iconsList = ref([
  { id: 1, icon: 'pinglun', des: 'hh' },
  { id: 2, icon: 'fenxiang', des: 'ww' },
  { id: 3, icon: 'xiazai', des: 'ff' },
  { id: 4, icon: 'duoxuan-xuanzhong', des: 'rr' }
])

</script>

<style lang="scss" scoped>
// .bgimg {

// }
.top-detail {
    padding: .3rem;
    background-color: pink;
    :deep(.icon) {
        width: .5rem;
        height: .5rem;
    }
}
.nav {
    display: flex;
    justify-content: space-between;
    .left, .right {
        display: flex;
        align-items: center;
    }
    .left {
        span {
            padding-left: .6rem;
            color: white;
            font-size: .36rem;
        }
    }
    .search {
        margin-right: .5rem;
        :deep(.icon) {
            margin-top: .12rem;
        }
    }
}
.icons-list {
    display: flex;
    justify-content: space-between;
    margin: .4rem;
    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        // :deep(.icon) {
        //     width: .5rem;
        //     height: .5rem;
        // }
        span {
            margin-top: .16rem;
            color: white;
            font-size: .36rem;
        }
    }
}
</style> -->
